import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import type { App } from 'vue'
import AccountLayout from '@/layouts/AccountLayout.vue'
import AccountInfoLayout from '@/layouts/AccountInfoLayout.vue'

import AccountSecurityLayout from '@/layouts/AccountSecurityLayout.vue'
export const constantRouterMap: AppRouteRecordRaw[] = [
  {
    path: "/",
    component: AccountLayout,
    children: [
      { path: "", redirect: "/account" },
      { path: "account", component: () => import("@/views/Profile.vue") },
      {
        path: "appeal",
        component: () => import("@/views/AccountAppeal.vue"),
      },
      {
        path: "deletion",
        component: () => import("@/views/AccountDeletion.vue"),
      },
    ],
  },
  {
    path: "/account/information", 
    component: AccountInfoLayout, 
    children: [
      { path: "", redirect: "/account/information/password" },     
      { path: "phone", component: () => import("@/views/PhoneBinding.vue") },
      {
        path: "password",
        component: () => import("@/views/LoginPassword.vue"),
      },
      { path: "email", component: () => import("@/views/EmailBinding.vue") },
      {
        path: "linked-accounts",
        component: () => import("@/views/LinkedAccounts.vue"),
      }
    ]
  },
  {
    path: "/account/security", 
    component: AccountSecurityLayout, 
    children: [
      { path: "", redirect: "/account/security/protection" },
      {
        path: "protection",
        component: () => import("@/views/AccountProtection.vue"),
      },
      {
        path: "login-methods",
        component: () => import("@/views/LoginMethods.vue"),
      },
      {
        path: "devices",
        component: () => import("@/views/LoginDevices.vue"),
      },
      {
        path: "authorization",
        component: () => import("@/views/AuthorizationManagement.vue"),
      },
      {
        path: "login-history",
        component: () => import("@/views/LoginHistory.vue"),
      },
      {
        path: "sensitive-records",
        component: () => import("@/views/SensitiveRecords.vue"),
      },
    ]
  }
]


const router = createRouter({
  history: createWebHistory(),
  strict: true,
  routes: constantRouterMap as RouteRecordRaw[],
  scrollBehavior: () => ({ left: 0, top: 0 })
})

export const setupRouter = (app: App<Element>) => {
  app.use(router)
}

export default router